
// 基于准备好的dom，初始化echarts实例
var myChart_bar = echarts.init(document.getElementById('chart-panel-1'));
// 指定图表的配置项和数据
var option_bar = {};

//=============== start ===============//
/**
 * 🚨🚨非常重要🚨🚨
 * 下面是 网站左侧代码，核心代码
 */
option_bar = {
    title: {
        text: '',
        textStyle: {
            align: 'center',
            color: '#fff',
            fontSize: 20,
        },
        top: '0%',
        left: '10%',
    },
    backgroundColor: 'rgba(1,1,47,0)',
    grid: {
        top: "20%",
        bottom: "15%", //也可设置left和right设置距离来控制图表的大小
        left: "5%",
        right: "12%"
    },
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            label: {
                show: true, // 显示标签
                formatter: function(params) {
                    // params 包含 value, axisDimension, axisIndex, seriesData 等信息
                    return  params.value+'月';
                },
                backgroundColor: '#333',
                color: '#fff',
                borderRadius: 4,
                padding: [3, 5, 3, 5]
            }
        }
    },
    legend: {
        data: ["总计", "增长", "增长率"], // 添加 "主营业务1" 到图例
        top: "0%",
        right: "8%",
        icon: "circle",
        textStyle: {
            color: "#ffffff"
        }
    },
    xAxis: {
        data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
        axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
                color: '#5d6068'
            }
        },
        axisTick: {
            show: false //隐藏X轴刻度
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#FFFFFF" //X轴文字颜色
            }
        },
    },
    yAxis: [{
        type: "value",
        name: "",
        nameTextStyle: {
            color: "#FFFFFF"
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: true
        },
        axisLine: {
            show: false,
            // lineStyle: {
            //     color: '#FFFFFF'
            // }
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: "#ffffff"
            }
        },
    },
        {
            type: "value",
            name: "",
            nameTextStyle: {
                color: "#ffffff"
            },
            position: "right",
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                formatter: "{value} %", //右侧Y轴文字显示
                textStyle: {
                    color: "#ffffff"
                }
            }
        },
        {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
                show:true,//是否展示
                lineStyle:{
                    color:"#353b5a",//线条颜色
                    // type:"dashed"//线条样式，默认是实现，dashed是虚线
                }

            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                show: false
            },
            // 斑马纹
            splitArea: {
                // show: true,
                // areaStyle: {
                //     color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                // }
            }
        }
    ],
    series: [
        {
            name: "增长率",
            type: "line",
            z: 0,
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 10, //标记的大小
            showSymbol: false, // 隐藏圆点
            itemStyle: {
                //折线拐点标志的样式
                color: "#fdfb03",
            },
            lineStyle: {
                color: "#fdfb03"
            },
            areaStyle: {
                color: "rgba(253,251,3,0.19)"
            },
            data: [120, 80, 50, 30, 30, 40, 40, 20, 10, 40, 23, 50]
        },

        {
            barWidth: "35%" ,
            name: "总计",
            type: "bar",
            stack: "增长", // 设置 stack 属性，将两个柱状图堆叠在一起
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: "#63FDFEFF"},
                        {
                            offset: 0.95,
                            color: "rgba(99,253,254,0)"
                        }
                    ])
                }
            },
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.3, 1.5, 2.6, 3.2]
        },
        {
            name: "增长",
            type: "bar",
            barWidth: "35%" ,
            stack: "增长", // 设置相同的 stack 属性，与 "主营业务" 堆叠在一起
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(255,215,206,0.9)" // 使用不同的颜色区分
                    },
                        {
                            offset: 1,
                            color: "rgba(255,180,180,0.6)"
                        }
                    ])
                }
            },
            data: [2.1, 1.9, 2.4, 1.75, 1.45, 2.8, 3, 5, 2.3, 1.4, 1.5, 2.5]
        },
        {
            name: '',
            type: 'pictorialBar',
            symbolSize: ['42%', 3],
            symbolOffset: [0, -1], // 上部椭圆
            symbolPosition: 'end',
            z: 12,
            // "barWidth": "0",
            data: [6.3, 5.7, 7.2, 5.25, 4.35, 5.6, 6, 10, 4.6, 2.9, 4.1, 5.7],
            itemStyle: {
                color: '#ffffff',
                shadowBlur: 20, // 阴影的模糊大小
                shadowColor: 'rgb(255,255,255)', // 阴影的颜色
                shadowOffsetX: 0, // 阴影的水平偏移
                shadowOffsetY: -2 // 阴影的垂直偏移
            },
            tooltip: {
                show: false
            }

        },
     /*   {
            name: '',
            type: 'pictorialBar',
            symbolSize: ['40%', 5],
            symbolOffset: [0, 3], // 下部椭圆
            // "barWidth": "20",
            z: 12,
            color: '#63FDFEFF',
            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.3, 1.5, 2.6, 3.2]
        },*/
        {  name: '',
            type: 'pictorialBar',
            symbolSize: ['42%', 3],
            symbolOffset: [0, -1], // 上部椭圆
            symbolPosition: 'end',
            z: 12,
            // "barWidth": "0",
            itemStyle: {
                color: '#63FDFEFF',
                shadowBlur: 20, // 阴影的模糊大小
                shadowColor: 'rgb(255,255,255)', // 阴影的颜色
                shadowOffsetX: 0, // 阴影的水平偏移
                shadowOffsetY: -2 // 阴影的垂直偏移
            }, tooltip: {
                show: false
            },

            data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5, 2.3, 1.5, 2.6, 3.2]
        }
    ]
};

//=============== end ===============//
// 使用刚指定的配置项和数据显示图表。
if (option_bar && typeof option_bar === 'object') {
    myChart_bar.setOption(option_bar);
}
/*
window.addEventListener('resize', myChart_bar.resize);

*/

// 窗口大小改变时重新调整图表
window.addEventListener('resize', function () {
    myChart_bar.resize();
});

function myCharBarResize() {
    myChart_bar.resize();
}
